Pressidian
花园入口
笔记
项目
关于
实验室
GitHub
花园入口
笔记
项目
关于
实验室
GitHub

KNOWLEDGE PATHS

笔记库
当前位置
笔记库/前端/三件套/JS/廖雪峰教程/7浏览器

7.6 async

1 分钟阅读 · Note

目录树 578 篇

              • 7.2 表单
              • 7.3 文件
              • 7.4 AJAX
              • 7.5 Promise
              • 7.6 async
              • 7.7 Canvas
          • 前端模块化
      • 前端技术栈
    • 笔记目录
    • CLAUDE.md
    • Vue 组件与 Render 函数

关联笔记 6

↗7.2 表单同一路径↗7.3 文件同一路径↗7.4 AJAX同一路径↗7.5 Promise同一路径↗7.7 Canvas同一路径↗7.1.1 浏览器对象共同主题
  • 7.6 async

7.6 async

可以用关键字async配合await调用Promise,实现异步操作,但代码却和同步写法类似:

async function get(url) {
    let resp = await fetch(url);
    let result = await resp.json();
    return result;
}

使用async function可以定义一个异步函数,异步函数和Promise可以看作是等价的,在async function内部,用await调用另一个异步函数,写起来和同步代码没啥区别,但执行起来是异步的:

let resp = await fetch(url);

自动实现了异步调用,它和下面的Promise代码等价:

let promise = fetch(url);
promise.then((resp) => {
    // 拿到resp
});

如果我们要实现catch()怎么办?用Promise的写法如下:

let promise = fetch(url);
promise.then((resp) => {
    // 拿到resp
}).catch(e => {
    // 出错了
});

用await调用时,直接用传统的try { ... } catch:

async function get(url) {
    try {
        let resp = await fetch(url);
        let result = await resp.json();
        return result;
    } catch (e) {
        // 出错了
    }
}

用async定义异步函数,用await调用异步函数,写起来和同步代码差不多,但可读性大大提高。